<template>
   <div class="home">
       <div class="content w">
           <h1>宝宝，是生命的开始</h1>
           <p>宝宝培育重中之重</p>
           <p>护理知识绝对不可缺少</p>
           <p>一起来培育一个健康的宝宝</p>
           <a href="" class="btn">立即学习</a>
           <ul class="bbtu">
               <li>
                   <a href=""><img src="../../images/b1.jpg" alt=""></a>
               </li>
               <!-- <li>
                   <a href=""><img src="../../images/b2.jpg" alt=""></a>
               </li>
               <li>
                   <a href=""><img src="../../images/b3.jpg" alt=""></a>
               </li> -->
           </ul>
       </div>
       <div class="hui">
       <div class="bottom w">
           <router-link to="/home/gowz"  class="left" >
               <h1>
                   妈妈交流集中营
               </h1>
               <i>
                   <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shequ"></use>
                   </svg>
               </i>
           </router-link>
           <router-link to="/home/shop" class="right">
               <h1>
                   培育宝宝必需品
               </h1>
               <i>
                   <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_shoppingmall"></use>
                   </svg>
               </i>
           </router-link>
       </div>
       </div>
            
   </div>
   
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        
    }
}
</script>
<style lang="scss" scoped>
    .home{
        
        height: 424px;
        background: url(../../images/hui.jpg) repeat-x;
    }
    .hui{
        
        height: 424px;
        background: url(../../images/hui.jpg) repeat-x;
    }
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .bbtu{
        right: 0;
        top: 27px;
        
        position: absolute;
        img{
            height: 370px;
            width: 700px;
        }
    }
    .content{
        height: 424px;
        position: relative;
        h1{
            padding: 45px 0 3px;
            font-weight: 500;
        }
        p{
            font-size: 23px;
            color: #979797;
            margin: 10px 0;
        }
        a{
            text-decoration: none;
        }
        .btn{
            display: block;
            width: 224px;
            height: 64px;
            margin-top: 15px;
            background: #348903;
            position: relative;
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            line-height: 64px;
            border-radius: 8px;
        }
    }
    .bottom{
        width: 1200px;
        height: 250px;
        position: relative;
        
        a{
            text-decoration: none;
            color:#242424;
        }
        
        .left{
            display: block;
            height: 250px;
            width: 590px;
            background-color: pink;
            position: absolute;
            i{
                font-size: 100px;
                padding-left: 245px;
            }
            h1{
                margin: 10px 170px;
            }
            border-radius: 10px;
        }
        .right{
            display: block;
            height: 250px;
            width: 590px;
            right: 0;
            position: absolute;
            i{
                font-size: 100px;
                padding-left: 245px;
            }
            h1{
                margin: 10px 170px;
            }
            border-radius: 10px;
            background-color: skyblue;
        }
    }
    
    .w{
        width: 1200px;
        margin: 0 auto;
    }
</style>
